<template>
    <div class="container">
        <div class="table-sign" :style="{height:`${pdfHeight}px`}" v-for="(item,index) in signList" :key="item.id">
            <template v-if="index===0">
                <div class="sign-title">尽职调查工作清单</div>
                <div class="sign-card">
                    <div>
                        <div>321个</div>
                        <div>尽调项</div>
                    </div>
                    <div>
                        <div>321个</div>
                        <div>尽调项</div>
                    </div>
                    <div>
                        <div>321个</div>
                        <div>尽调项</div>
                    </div>
                </div>
            </template>
            <div class="tabel">
                <div class="th">
                    <div>专业/空间</div>
                    <div>尽调项数量</div>
                    <div>调查工时</div>
                    <div>配合工时</div>
                </div>
                <div class="tr" :id="`tr-${child.id}`" v-for="(child,cIndex) in item.children" :key="cIndex">
                    <div>{{child.className}}</div>
                    <div>{{child.num}}</div>
                    <div>{{child.hours}}</div>
                    <div>{{child.hours1}}</div>
                </div>
            </div>
            <div v-if="index===signList.length-1" class="sign-text">签字：</div>
        </div>
    </div>

</template>

<script>
import { getUuid } from '@/utils'
export default {
    props: {
        pdfHeight: {
            type: Number,
            default: 1415
        }
    },
    data () {
        return {
            signList: []
        }
    },
    mounted () {
        this.setDate()
    },
    methods: {
        setDate () {
            this.getData().then(res => {
                this.signList = res
                this.$nextTick(() => {
                    this.sliceData()
                })
            })
        },
        getData () {
            const _this = this
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(_this.init())
                }, 1000)
            })
        },
        init () {
            let t = []
            for (let p = 0; p < 1; p++) {
                let arr = []
                for (let j = 0; j < 40; j++) {
                    let obj = {
                        id: getUuid(),
                        className: '专业' + (j + 1),
                        num: 25 + j,
                        hours: '5小时20分钟',
                        hours1: '30分钟'
                    }
                    arr.push(obj)
                }
                const pConfig = {
                    id: getUuid(),
                    children: arr
                }
                t.push(pConfig)
            }
            return t
        },
        // 获取节点高度
        getHeight (id) {
            const node = document.getElementById(id)
            const { height = 0 } = node.getBoundingClientRect()
            return height
        },
        sliceData () {
            const pdfHeight = this.pdfHeight // pdf一页高度
            const titleHeight = 85 // 标题高度
            const cardHeight = 164 // 卡片高度+下边距
            const tablePaddingTop = 20 // 表格上边距
            const tableThHeight = 38 // 表头
            let newList = [] // 新一页数据
            this.signList.forEach(x => {
                x.children.forEach(y => {
                    y.trHeight = this.getHeight(`tr-${y.id}`) // 表格每行高度
                })
            })
            // 递归处理每页数据
            const recursion = (page, x) => {
                let contentHeight = x === 0 ? (titleHeight + cardHeight + tableThHeight) : (tablePaddingTop + tableThHeight) // 内容实际高度
                for (let y = 0; y < page.children.length; y++) {
                    const trItem = page.children[y]
                    contentHeight += trItem.trHeight
                    if (contentHeight >= (pdfHeight - 120)) { // 内容高度超出pdf一页高度,120是上下内边距
                        contentHeight = 0
                        newList = page.children.slice(y)// 将剩余部分放在下一页
                        page.children.splice(y, page.children.length - y)// 将剩余部分删除
                        break
                    }
                }
                if (newList.length) {
                    let p = {
                        id: getUuid(),
                        children: newList
                    }
                    this.signList.push(p)
                    newList = []
                }
                if (x !== this.signList.length - 1) recursion(this.signList[x + 1], x + 1)
            }
            recursion(this.signList[0], 0)
        }
    }
}
</script>
<style lang='less' scoped>
.container {
    width: 100%;

    .table-sign {
        padding: 60px;
        // height: 1415px;
        width: 100%;
        position: relative;

        .sign-text {
            position: absolute;
            right: 243px;
            bottom: 92px;
        }

        .sign-title {
            padding-bottom: 40px;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei UI';
            font-style: normal;
            font-weight: 700;
            font-size: 30px;
        }

        .sign-card {
            height: 124px;
            margin-bottom: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #EDF1F5;
            border-radius: 8px;
        }

        .tabel {
            margin-top: 20px;

            .th,
            .tr {
                width: 100%;
                display: flex;
                align-items: center;
                padding: 0 16px;
                box-sizing: border-box;

                div {
                    width: 33%;
                }
            }

            .th {
                height: 38px;
                background: #edf1f5;
                color: #626c78;
            }

            .tr {
                padding: 13px 16px;
                border-bottom: 1px solid #c4c9cf;
                box-sizing: border-box;
            }
        }
    }
}
</style>
